layui.config({
    base: '/home/js/util/'
}).use(['element','laypage','form','layer','menu','jquery'],function(){
    element = layui.element,laypage = layui.laypage,form = layui.form,layer = layui.layer,menu = layui.menu,$ = layui.jquery;

    $("#up").on('click',function () {
        layer.open({
            type: 2,
            title: '上传图片',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: 'upload-album.html'
        });
    });

    var parameter =  {
        page : 1,
        limit : 20,
        req : {
        }
    };

    //加载图片数据
    var loadPicture = function() {
        $.ajax({
            url:'/album-picture/list',
            type:'POST', //GET
            async:true,    //或false,是否异步
            data: JSON.stringify(parameter),
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            contentType: "application/json",
            success:function(res){
                renderData(res.data.records);
                laypageTable(res.data.total);
            }
        });
    };
    //加载分页条
    var laypageTable = function (total) {
        if (total <= 1){
            return;
        }
        laypage.render({
            elem: 'demo',
            count: total,
            limit: parameter.limit,
            curr: parameter.page,
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            jump: function (obj, first) {
                if (!first) {
                    parameter.page = obj.curr;
                    parameter.limit = obj.limit;
                    loadPicture();
                }
            }
        });
    };

    var renderData = function(data) {

        var html = '';
        $.each(data,function (index,value) {
            html += '<div  class="layui-col-xs12 layui-col-sm4 layui-col-md4">\n' +
                '            <div  class="item">\n' +
                '              <img  style="cursor: pointer;"  layer-src="'+ value.pictureUrl +'"  src="'+ value.pictureUrl +'">\n' +
                '              <div class="cont-text">\n' +
                '                <div class="data">2020/05/20</div>\n' +
                '                <p class="address"><i class="layui-icon layui-icon-location"></i><span>云南曲靖</span></p>\n' +
                '                <p class="briefly">今日天气晴朗,庐山一日游</p>\n' +
                '              </div>\n' +
                '            </div>\n' +
                '          </div>'
        })

        $("#pictureAre").html(html);
        layer.photos({
            photos: '.item'
            ,anim: 5 //随机弹出
        });
        form.render();
    };

    layer.photos({
        photos: '#layer-photos-demo'
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        ,tab:function(pic,layero){
            console.log(pic,layero)
        }
    });

    loadPicture();
    menu.init();
})
